<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>流动布局2</title>
    <style>
        *{margin: 0;padding: 0;}
        nav{display: table-cell;width: 210px;padding: 5px;}
        article{display: table-cell;padding: 5px;}
        aside{display: table-cell;width: 210px;padding: 5px;}
    </style>
</head>
<body>
<div id="wrapper">
    <header>
        this is header
    </header>
    <nav>
        <li>nav1</li>
        <li>nav2</li>
    </nav>
    <article>
        <p> 我们需要更精细地控制布局宽度，以便随着浏览器窗口宽度的合理变
            化，布局能够作出适当的调整，确保文本行不会过长或过短。如果随意给元素添加
            内边距、边框，或者元素本身过大，导致浮动元素的宽度超过包含元素的布局宽度，
            那浮动元素就可能“躲”到其他元素下方。
        </p>

        <p> 当然啦，即使必须设定栏宽，也不要给包含在其中的内容元素设定宽度，应该让这
            些内容元素自动扩展到填满栏的宽度。本书前面已经讲过了，这是块级元素的默认
            行为。简言之，就是让栏宽限制其中内容元素的宽度。
            以上这些细节在实际地创建布局时会更容易明白。眼下，只要知道应该控制布局宽
            度，而让内容决定布局高度这个一般原则就好了。
        </p>
    </article>
    <aside>
        aside
    </aside>
    <footer>
        this is footer
    </footer>
</div>
</body>
</html>